// Copyright 2012-present OSBI Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

button {
  cursor: pointer;
}

.button-group {
  white-space: nowrap;

  > .button {
    margin-right: 4px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.button {
  display: inline-block;
  box-sizing: border-box;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 36px;
  border: 0;
  transition: all 0.2s ease;
  text-align: center;

  &.danger {
    color: $color-red;

    &:hover {
      color: $color-red;
    }
  }
}

.button-default {
  color: rgba($color-font, 0.7);
  border: 1px solid rgba(#000, 0.06);
}

.button-primary {
  color: #fff;
  background-color: $color-primary;

  &:hover {
    background-color: darken($color-primary, 5%);
  }
}

.button-secondary {
  color: #fff;
  background-color: $color-secondary;

  &:hover {
    background-color: darken($color-secondary, 5%);
  }
}

.button-danger {
  color: #fff;
  background-color: $color-red;

  &:hover {
    background-color: darken($color-red, 5%);
  }
}

.button-right {
  float: right;
}

.button-block {
  width: 100%;
  margin: 0 0 15px 0;
  text-align: center;
}

.button-dropdown {
  position: relative;

  &:hover {
    ul {
      display: block;
    }
  }

  ul {
    position: absolute;
    z-index: 100;
    right: 18px;
    display: none;
    width: 120px;
    margin: -3px 0 0 0;
    padding: 8px 0;
    list-style: none;
    border-radius: 2px 0 2px 2px;
    background-color: #fff;

    filter: drop-shadow(0 0 2px rgba(#000, 0.12));

    li {
      font-size: 13px;

      a {
        display: block;
        padding: 2px 20px;
      }
    }

    &:before {
      position: absolute;
      top: -6px;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border: 3px solid transparent;
      border-right-color: #fff;
      border-bottom-color: #fff;
      content: '';
    }
  }
}
